<template>
  <div id="userLoginView">
    <h2 style="color: #ffffff; margin-bottom: 16px">用户登录</h2>
    <a-form
      :model="form"
      @submit="handleSubmit"
      size="medium"
      label-align="left"
      auto-label-width
      style="max-width: 480px; margin: 0 auto"
    >
      <a-form-item field="userAccount" tooltip="请输入账号" label="账号">
        <a-input v-model="form.userAccount" placeholder="请输入账号" />
      </a-form-item>
      <a-form-item field="userPassword" label="密码">
        <a-input-password
          v-model="form.userPassword"
          placeholder="请输入账号密码"
        />
      </a-form-item>
      <a-form-item style="text-align: right">
        <a-button type="primary" html-type="submit" style="margin-left: 160px">
          登录
        </a-button>
        <a-button
          type="primary"
          @click="showRegister"
          style="margin-left: 160px"
        >
          注册
        </a-button>
      </a-form-item>
    </a-form>
    <!--  注册弹窗-->
    <a-modal
      v-model:visible="registerFrom.visible"
      title="用户注册"
      @cancel="registerCancel"
      :mask-closable="false"
      @ok="register"
      ok-text="注册"
      cancel-text="取消"
    >
      <a-form
        :model="registerFrom"
        style="max-width: 420px"
        :rules="registerFromRules as any"
      >
        <a-row>
          <a-col>
            <a-form-item field="emailAddress" label="邮箱">
              <a-input v-model="registerFrom.emailAddress" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-col :flex="1">
          <a-form-item field="code" label="验证码">
            <a-input v-model="registerFrom.code" />
            <CountdownButton @click="getMailCode" />
          </a-form-item>
        </a-col>
        <a-row>
          <a-col>
            <a-form-item field="userPassword" label="密码">
              <a-input-password v-model="registerFrom.userPassword" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <a-form-item field="checkPassword" label="确认密码">
              <a-input-password v-model="registerFrom.checkPassword" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { UserControllerService, UserLoginRequest } from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import CountdownButton from "@/components/CountdownButton.vue";

const router = useRouter();
const store = useStore();
const form = reactive({
  userAccount: "",
  userPassword: "",
} as UserLoginRequest);
const registerFrom = reactive({
  visible: false,
  emailAddress: "",
  code: "",
  uuid: "",
  userPassword: "",
  checkPassword: "",
});
const registerFromRules = {
  emailAddress: [
    { require: true, message: "邮箱不能为空", trigger: "blur" },
    {
      pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/,
      message: "请输入有效的邮箱",
    },
  ],
  code: [
    { required: true, message: "验证码不能为空", trigger: "blur" },
    { pattern: /^[0-9]{6}$/, message: "请输入6位数字验证码" },
  ],
  userPassword: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 8, message: "密码至少为 8 位字符" },
  ],
  checkPassword: [
    { required: true, message: "确认密码不能为空" },
    { validator: registerFrom.userPassword, trigger: "blur" },
  ],
};
//登录按钮
const handleSubmit = async () => {
  const res = await UserControllerService.userLoginUsingPost(form);
  if (res.code === 0) {
    message.success("登录成功");

    await store.dispatch("user/getLoginUser");
    router.push({
      path: "/",
      replace: true,
    });
  } else {
    message.error("登录失败，" + res.message);
  }
};
const showRegister = async () => {
  registerFrom.visible = true;
};
const registerCancel = () => {
  registerFrom.visible = false;
};
const getMailCode = async () => {
  const res = await UserControllerService.getMailCodeUsingPost(registerFrom);
  if (registerFrom.emailAddress === "") {
    message.error("叫你乱点，等着吧-_-!");
  }
  if (res.code === 0) {
    registerFrom.uuid = res.data;
    message.success("发送成功");
  }
};
const register = async () => {
  const res = await UserControllerService.mailRegisterUsingPost(registerFrom);
  if (res.code === 0) {
    message.success("注册成功");
    form.userAccount = registerFrom.emailAddress;
  } else {
    message.error("数据迷路了，请重试");
  }
};
</script>
